<template>
  <div :class="['layout', {
    'bg-color-f4': currentPath.includes('private-custom')
  }]">
    <LayoutHeader />
    <div class="layout-container">
      <!-- <transition name="fade"> -->
      <router-view />
      <!-- </transition> -->
    </div>
    <Banner v-if="isHomePage" />
    <video-bg v-if="isHomePage" />
    <LayoutFooter />
  </div>
</template>

<script>
import LayoutHeader from "@/components/header";
import Banner from "@/components/home-banner";
import VideoBg from "@/components/home-video-bg";
import LayoutFooter from "@/components/footer";

export default {
  name: "layout",
  data() {
    return {
      isHomePage: this.matchRouterForBanner(),
      currentPath: this.$router.currentRoute.path
    };
  },
  methods: {
    redirect() {
      if (this.$router.currentRoute.path === "/") {
        this.$router.replace("home"); // redirect to home
      }
    },
    matchRouterForBanner() {
      return this.$router.currentRoute.path.endsWith("home");
    }
  },
  watch: {
    $route() {
      this.currentPath = this.$router.currentRoute.path;
      this.isHomePage = this.matchRouterForBanner();
    }
  },
  components: {
    LayoutHeader,
    Banner,
    VideoBg,
    LayoutFooter
  },
  created() {
    this.redirect();
  },
  mounted() {}
};
</script>

<style lang="less" scope>
.layout {
  position: relative;
  min-height: 100vh;
  padding-bottom: 60px;
  box-sizing: border-box;
  .layout-container {
    max-width: 1200px;
    margin: 0 auto;
  }

  /*Vue 动画效果*/
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.14s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
  &.bg-color-f4 {
    background-color: #f4f4f4;
  }
  &.animate-fade {
    animation: animate-fade 999ms;
  }
}

@keyframes animate-fade {
  0% {
    opacity: 0.04;
    transform: translateY(4%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

</style>
